import React, { useEffect, useState } from 'react'

import { Column } from '@ant-design/plots';
import styles from './index.module.css'


function Statistical() {

    const config = {
        data: [
            { "letter": "用户", "frequency": 100 },
            { "letter": "OCR次数", "frequency": 300 },
            { "letter": "今日在线", "frequency": 500 },
            { "letter": "其他", "frequency": 120 },
            { "letter": "其他1", "frequency": 121 },
            { "letter": "其他2", "frequency": 412 },
            { "letter": "其他3", "frequency": 212 },
            { "letter": "其他5", "frequency": 412 },
        ],
        xField: 'letter',
        yField: 'frequency',
        label: {
            text: (d) => d.frequency,
            textBaseline: 'bottom',
        },
        axis: {
            y: {
                labelFormatter: '1',
            },
        },
        color: '#ff4d4f',
        style: {
            radiusTopLeft: 7,
            radiusTopRight: 7,
            fill: "#1890ff"//填充颜色
        },
    };

    //[]空数组相当于componentDidMount
    useEffect(() => {
        return () => {
        }
    }, []);


    return (
        <div className={styles.container}>
            <span className={styles.title_text}>统计一览表</span>
            <div className={styles.column}>
                <Column {...config} />
            </div>
        </div>
    )
}

export default Statistical;